<template>
  <div>
    <HeaderNav :title="$t('m.headernav.SETTING')" :showBack="true" />
    <router-link class="setting_li_container" v-for="(item,index) in list" :key="index" :to="item.url">
      <div>{{item.title}}</div>
      <van-icon name="arrow" color="#9EA0A0"/>
    </router-link>
    <div class="setting_btn" @click="logout">{{$t('m.msg.LOGOUT')}}</div>
    <!-- <Footer /> -->
  </div>
</template>

<script>
import {
    Tabbar,
    TabbarItem,
    Icon 
} from 'vant';
import HeaderNav from '@/components/HeaderNav.vue'
import Footer from '@/components/Footer.vue'
import {removeUser} from '@/api/session';
import {postQuery, getQuery} from '@/api/query';
export default {
  name: 'setting',
  components: {
      [Tabbar.name]: Tabbar,
      [TabbarItem.name]: TabbarItem,
      [Icon.name]: Icon,
      HeaderNav,
      Footer
  },
  data(){
    return {
      ws: {},
      flag: true,
      active: 3,
      list:[
        // {
        //   title:'关于我们',
        //   url:''
        // },
        {
          title: this.$i18n.t('m.headernav.LANGUAGESETTING'),
          url:'/languageSetting'
        },
        {
          title: this.$i18n.t('m.headernav.EDITUSERINFO'),
          url:'/editUserInfo'
        },
        {
          title: this.$i18n.t('m.headernav.UPDPASSWORD'),
          url:'/updPassword'
        }
        // {
        //   title:'客服经理',
        //   url:'/chatIndex'
        // },
        // {
        //   title:'客服小Q',
        //   url:'/chatIndex'
        // }
        ]
    }
  },
  methods: {
 		logout(){
       let that = this;
        getQuery('/member/logout')
        .then (res => {
          console.log(res)
          if(res.code == 200){
            removeUser();
            //关闭socket
            that.ws.close()
            that.$router.push({
              path:'/login'  
            })
          }else{
            that.$toast.fail(res.msg);
          }
      })
 		}

  },
  created(){
    this.ws = this.$parent.$data.ws;
    // this.ws.onclose = this.close
  }
}
</script>
<style scoped>
  /*.setting_container{
    background-color: #E6FEFE;
    height: 92vh;
    width: 100%;
    padding-top:  8vh;
  }*/

  .setting_li_container{
    display: flex;
    color: #666666;
    height: 7vh;
    padding: 0px 40px;
    font-size: 30px;
    align-items: center;
    justify-content: space-between;
  }

  .setting_btn{
    height: 120px;
    width: 90vw;
    margin: 5vh 5vw;
    background-color: #01D2FF;
    color: white;
    font-size: 42px;
    border-radius: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>
